<template>
  <div class="right-select-animate">
    <div class="title"><i class="jy-icon-arrow-left" @click.stop="onHiddenSelectAnimate($event)"></i>选择动画</div>
    <el-tabs v-model="activeName" class="margin-left-right-16 margin-top-10" type="border-card">
      <el-tab-pane label="进入" name="first">
        <ul class="edit-handles-con">
          <li v-for="(item) in animates.ins" :key="item.value" @click.stop="onPlayAnimate(item)" :class="item.active ? 'active' : ''" @mouseover="onHover(item)" @mouseout="onOut(item)">
            <div class="scale-con"><i :class="item.isHover ? item.classStrHover : item.classStr"></i></div>
            <p>{{item.name}}</p>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="强调" name="second">
        <ul class="edit-handles-con">
          <li v-for="(item) in animates.emphasizes" :key="item.value" @click.stop="onPlayAnimate(item)" :class="item.active ? 'active' : ''" @mouseover="onHover(item)" @mouseout="onOut(item)">
            <div class="scale-con"><i :class="item.isHover ? item.classStrHover : item.classStr"></i></div>
            <p>{{item.name}}</p>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="退出" name="third">
        <ul class="edit-handles-con">
          <li v-for="(item) in animates.outs" :key="item.value" @click.stop="onPlayAnimate(item)" :class="item.active ? 'active' : ''" @mouseover="onHover(item)" @mouseout="onOut(item)">
            <div class="scale-con"><i :class="item.isHover ? item.classStrHover : item.classStr"></i></div>
            <p>{{item.name}}</p>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import { getAnimateData } from '@/common/const-animates'
import { EventBus } from '@/store/index'
import { reactive } from 'vue'
export default {
  name: "RightSelectAnimate",
  setup () {
    const animates = reactive(getAnimateData())
    return {
      activeName: 'first',
      animates,
      currentItem: null,
    }
  },
  computed: {
    ...mapState({
      componentData: (state) => state.components.currentComponentData,
    }),
  },
  methods: {
    ...mapActions({
      changeSelectAnimatePlane: "changeSelectAnimatePlane",
      updateCurrentAnimateItem: "components/updateCurrentAnimateItem",
    }),
    onHover(item){
      item.isHover = true;
      if(this.currentItem){
        this.currentItem.active = false;
      }
      item.active = true;
      this.currentItem = item;
      this.updateCurrentAnimateItem({name: item.name, classStr: item.value, isPlaying: true});
      EventBus.$emit("playAnimate")
    },
    onOut(item){
      item.isHover = false;
      item.active = false;
    },
    onHiddenSelectAnimate(e){
      e.stopPropagation();
      e.preventDefault();
      this.changeSelectAnimatePlane({isActive: false});
    },
    onPlayAnimate(){
      this.changeSelectAnimatePlane({isActive: false});
    }
  },

};
</script>
<style lang="scss">
.right-select-animate{
  .title{
    background-color: #127BFF;
    padding: 10px;
  }
  color: #ffffff;
  .jy-icon-arrow-left{
    margin-right: 10px;
    display: inline-block;
  }
  .el-tab-pane ul{
    margin-top: 10px;
    margin-left: 10px;
  }
  .el-tabs__item{
    height: 30px;
    line-height: 30px;
  }
  li{
    font-size: 12px;
    color: #000000;
    display: block;
    margin: 15px 18px;
    text-align: center;
    display: inline-block;

    .scale-con{
      width: 52px;
      height: 52px;
      margin: 0 auto;
       i{
          transform-origin: 0 0;
          transform: scale(0.5);
       }
    }
  }
  li.active, li:hover{
    color: #127BFF;
  }
}
</style>
